﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery combobox template: Demo siute(jqcmbx)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/icon" href="favicon.ico" />

<script type="text/javascript" src="js/console.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="../plugin/jqcmbx.min.js"></script>
<link href="../plugin/css/basic.css" rel="stylesheet" media="all" />

<script type="text/javascript" src="js/jsunittest.js"></script>
<script type="text/javascript" src="jstests/standart.js"></script>
<script type="text/javascript" src="jstests/tag-info-only.js"></script>
<script type="text/javascript" src="jstests/source-array.js"></script>
<script type="text/javascript" src="jstests/templates.js"></script>
<script type="text/javascript" src="jstests/api.js"></script>

<link href="css/index.css" rel="stylesheet" media="all" />
<link href="css/jsunittest.css" rel="Stylesheet" media="all" />
<link href="../plugin/themes/big.css" rel="stylesheet" media="all" />
<link href="../plugin/themes/big-image.css" rel="stylesheet" media="all" />
<link href="../plugin/themes/jQuery-style-alpha.css" rel="Stylesheet" media="all" />
<script type="text/javascript">
	function updateAutocomplete(data) {
		var info = data[1];
		var result = []
		for(var i =0; i < info.length; i++) {
			result.push({'value':info[i],'name':info[i]});
		}
		
		window.aut.jqcmbx('update',result);
	};

	$(function ()
	{
		/**
		*	Create comboboxes
		*/

		var jQueryUISelectTmpl = '<li data-value="${value}" data-group="${group}" data-filter="${name}">\
												<span class="ui-header">${name}</span>\
												<span class="ui-content">${address}</span>\
												<span class="ui-content">${address2}</span>\
												<span class="ui-footer">${footer}</span>\
											</li>';

		var aThreeCoutries = [{ name: 'Russia', value: 'Russia' }, { name: 'USA', value: 'USA' }, { name: 'Germany', value: 'Germany'}];
		window.std = $('#standart').jqcmbx({ 'filter': false });
		window.tmp = $('#template').jqcmbx({ 'filter': true, 'width': '274px', 'height': '2em', 'size': 4, 'classes': 'jqcmdx-jQuery-alpha', 'listTmpl': '<ol></ol>', 'optionTmpl': jQueryUISelectTmpl });
		window.arr = $('#source_array').jqcmbx({ 'source': aThreeCoutries, 'selected': 'USA' });
		
		
		var fAutocompleteYandex = function (value) {
			$.getScript('http://suggest.yandex.ru/suggest-ya.cgi?v=2&callback=updateAutocomplete&part='+value);
		};
		window.aut = $('#source_autocomplete').jqcmbx({
			'autocomplete': true,
			'width': '400px',
			'source': fAutocompleteYandex,
			'minLength': 2
		});
		window.dep = $('#source_dependence').jqcmbx({ 'source': [] });


	 	var BigSkinTemplate = '<li data-value="${value}" data-group="${group}" data-filter="${name} - ${group}">\
											<div class="pic"></div>\
											${name}\
											<div class="group">${group}</div>\
											<div class="clear"></div>\
										</li>';
		$('#big-skin').jqcmbx({
			'height': '36px',
			'filter': true,
			'classes': 'jqcmdx-big',
			'optionTmpl': BigSkinTemplate
		});
	});
</script>
</head>
<body>
	<dl>
		<dt>Without plugin / Без плагина:</dt>
		<dd>
			<select id="example" name="test-name" class="testclass" data-titlename="test-title-name" size="4">
				<option id="self" value="1" data-group="Programmer">Кирилл</option>
				<option value="2" data-group="Manager">Yura</option>
				<option value="3" data-group="AnyKeyer">Jhon Smith</option>
				<option value="4" data-group="Big baraboom" selected="selected">Mila</option>
				<option value="5" data-group="Green">Илья</option>
				<option value="6" data-group="Color">Вася</option>
				<option value="7" data-group="Town">Kazan</option>
				<option value="8" data-group="City">Moscow</option>
				<option value="9" data-group="Black Gems">Jack Sparrow</option>
				<option value="0" data-group="Matrix">Neo</option>
			</select>
		</dd>

		<dt>Source: Callback / Yandex.ru autocomplete</dt>
		<dd>
			<img src="" alt="Яндекс" width="100" border="0" height="44"/>
			<div id="source_autocomplete"></div>
		</dd>
		
		<dt>Стандартная замена</dt>
		<dd>
			<select id="standart" name="test-name" class="testclass" data-titlename="test-title-name" size="4">
				<option value="1" data-group="Programmer">Кирилл</option>
				<option value="2" data-group="Manager">Yura</option>
				<option value="3" data-group="AnyKeyer">Jhon Smith</option>
				<option value="4" data-group="Big baraboom" selected="selected">Mila</option>
				<option value="5" data-group="Green">Илья</option>
				<option value="6" data-group="Color">Вася</option>
				<option value="7" data-group="Town">Kazan</option>
				<option value="8" data-group="City">Moscow</option>
				<option value="9" data-group="Black Gems">Jack Sparrow</option>
				<option value="0" data-group="Matrix">Neo</option>
			</select>
		</dd>
		<dd id="jsunit_standart"></dd>

		<dt>Шаблонные замены</dt>
		<dd>
			<select id="template" name="test-name" class="testclass" data-titlename="test-title-name" size="4">
				<option value="1" data-group="Programmer" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Кирилл</option>
				<option value="2" data-group="Manager" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Yura</option>
				<option value="3" data-group="AnyKeyer" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Jhon Smith</option>
				<option value="4" data-group="Big baraboom" selected="selected" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Mila</option>
				<option value="5" data-group="Green" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Илья</option>
				<option value="6" data-group="Color" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Вася</option>
				<option value="7" data-group="Town" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Kazan</option>
				<option value="8" data-group="City" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Moscow</option>
				<option value="9" data-group="Black Gems" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Jack Sparrow</option>
				<option value="0" data-group="Matrix" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Neo</option>
			</select>
		</dd>
		<dd id="jsunit_template"></dd>

		<dt>Big skin</dt>
		<dd>
			<select id="big-skin" name="big-skin-name" size="4">
				<option value="1" data-group="Programmer" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Кирилл</option>
				<option value="2" data-group="Manager" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Yura</option>
				<option value="3" data-group="AnyKeyer" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Jhon Smith</option>
				<option value="4" data-group="Big baraboom" selected="selected" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Mila</option>
				<option value="5" data-group="Green" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Илья</option>
				<option value="6" data-group="Color" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Вася</option>
				<option value="7" data-group="Town" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Kazan</option>
				<option value="8" data-group="City" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Moscow</option>
				<option value="9" data-group="Black Gems" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Jack Sparrow</option>
				<option value="0" data-group="Matrix" data-address="78 West Main St Apt 3A" data-address2="Bloomsburg, PA 12345" data-footer="(footer text)">Neo</option>
			</select>
		</dd>
		
		<dt>Source: Array</dt>
		<dd>
			<div id="source_array" name="array-name" class="testclass" data-titlename="array-title-name" dara-size="4"></div>
		</dd>
		<dd id="jsunit_array"></dd>

		<dt>Source: dependence "Callback"</dt>
		<dd>
			<div id="source_dependence" name="dependence-name" data-titlename="dependence-title-name"></div>
		</dd>
		<dd id="jsunit_api"></dd>
	</dl>

<script language="javascript" type="text/javascript">
	$(function ()
	{
		/************************************
		* JS Unit tests
		************************************/
		var aTests = getTagInfoOnly();
		var aStdTest = getStandartTests();
		/**
		*	Standart tests
		*/
		aTests = aTests.concat(aStdTest);
		TestEngine(window.std, aTests, document.getElementById('jsunit_standart'));
		/**
		*	Tests with user templates
		*/
		aTempTests = getTemplatesTests();
		aTests = getStandartTests();
		aTests = aTempTests.concat(aTests);
		TestEngine(window.tmp, aTests, document.getElementById('jsunit_template'));
		/**
		*	Tests array as combobox source 
		*/
		aTests = getSourceArrayTests();
		TestEngine(window.arr, aTests, document.getElementById('jsunit_array'));
		/**
		*	Tests API
		*/
		aTests = getAPITests();
		TestEngine(window.dep, aTests, document.getElementById('jsunit_api'));
	});
</script>

</body>
</html>
